<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>南昌八一纪念馆</title>
		<style>
		body
			{
				margin:0;
				background:#000;
			}
		#wrap
			{
				width:300px;
				height:400px;
				position: relative;
				margin: 300px auto;
				-webkit-perspective:3000px;
				-moz-perspective:3000px;
				-ms-transform:perspective(3000px);
				-ms-perspective:3000px;
			}
		#head
			{
				width:100%;
				height:100%;
				position: absolute;
				-webkit-transform-style: preserve-3d;
				-webkit-animation:donghua 15s linear 0s infinite;
				-moz-transform-style: preserve-3d;
				-moz-animation:donghua 15s linear 0s infinite;
				-ms-transform-style: preserve-3d;
				-ms-animation:donghua 25s linear 0s infinite;
			}
		#head div
			{	
				position: absolute;
				top:0;
				left:0;
				width:300px;
				height:400px;
				border:1px solid #000
				text-align: center;
				line-height:100px;
			}
		#head div:nth-child(1)
			{
				-webkit-transform:rotateY(0deg) translateZ(400px);
				-moz-transform:rotateY(0deg) translateZ(400px);
				-ms-transform:rotateY(0deg) translateZ(400px);
				background:url(images1/01.gif);
				background-size:cover;
			}
		#head div:nth-child(2)
			{
				-webkit-transform:rotateY(36deg) translateZ(500px);
				-moz-transform:rotateY(36deg) translateZ(500px);
				-ms-transform:rotateY(36deg) translateZ(500px);
				background:url(images1/02.jpg);
				background-size:cover;
			}
			
		#head div:nth-child(3)
			{
				-webkit-transform:rotateY(72deg) translateZ(400px);
				-moz-transform:rotateY(72deg) translateZ(400px);
				-ms-transform:rotateY(72deg) translateZ(400px);
				background:url(images1/03.jpg);
				background-size:cover;
			}
			
		#head div:nth-child(4)
			{
				-webkit-transform:rotateY(108deg) translateZ(500px);
				-moz-transform:rotateY(108deg) translateZ(500px);
				-ms-transform:rotateY(108deg) translateZ(500px);
				background:url(images1/04.jpg);
				background-size:cover;
			}
		#head div:nth-child(5)
			{
				-webkit-transform:rotateY(144deg) translateZ(400px);
				-moz-transform:rotateY(144deg) translateZ(400px);
				-ms-transform:rotateY(144deg) translateZ(400px);
				background:url(images1/05.jpg);
				background-size:cover;
			}
		#head div:nth-child(6)
			{
				-webkit-transform:rotateY(180deg) translateZ(500px);
				-moz-transform:rotateY(180deg) translateZ(500px);
				-ms-transform:rotateY(180deg) translateZ(500px);
				background:url(images1/06.jpg);
				background-size:cover;
			}
		#head div:nth-child(7)
			{
				-webkit-transform:rotateY(216deg) translateZ(400px);
				-moz-transform:rotateY(216deg) translateZ(400px);
				-ms-transform:rotateY(216deg) translateZ(400px);
				background:url(images1/07.jpg);
				background-size:cover;
			}
		#head div:nth-child(8)
			{
				-webkit-transform:rotateY(252deg) translateZ(500px);
				-moz-transform:rotateY(252deg) translateZ(500px);
				-ms-transform:rotateY(252deg) translateZ(500px);
				background:url(images1/08.jpg);
				background-size:cover;
			}
		#head div:nth-child(9)
			{
				-webkit-transform:rotateY(288deg) translateZ(400px);
				-moz-transform:rotateY(288deg) translateZ(400px);
				-ms-transform:rotateY(288deg) translateZ(400px);
				background:url(images1/04.jpg);
				background-size:cover;
			}
		#head div:nth-child(10)
			{
				-webkit-transform:rotateY(324deg) translateZ(500px);
				-moz-transform:rotateY(324deg) translateZ(500px);
				-ms-transform:rotateY(324deg) translateZ(500px);
				background:url(images1/07.jpg);
				background-size:cover;
			}
		@-webkit-keyframes donghua{
			0%{transform:rotateX(5deg) rotateY(360deg)}
			50%{transform:rotateX(-5deg) rotateY(180deg)}
			100%{transform:rotateX(5deg) rotateY(0deg)}
		}
		@-moz-keyframes donghua{
			0%{transform:rotateY(10deg) rotateY(0deg)}
			50%{transform:rotateY(-10deg) rotateY(180deg)}
			100%{transform:rotateY(10deg) rotateY(360deg)}
		}
		@-ms-keyframes donghua{
			0%{transform:rotateY(10deg) rotateY(0deg)}
			50%{transform:rotateY(-10deg) rotateY(180deg)}
			100%{transform:rotateY(10deg) rotateY(360deg)}
		}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="head">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</body>
</html>